import React, {useEffect, useRef, useState} from 'react';
import style from './FrontPage.module.scss'
import {Button, Card, Divider, Spin} from "antd";
import MyCard from "../../component/MyCard/MyCard";
import {getBlogTextListApi} from "./FrontPageApi";
import {DeploymentUnitOutlined, DownloadOutlined, HddOutlined, LaptopOutlined} from "@ant-design/icons";

// 首页内容区
function FrontPage() {
    const [introduction] = useState(
        '前端开发工程师，2021年毕业于\'茂名职业技术学校\'，专业\'计算机工程系软件开发\'，202112-至今从事前端开发工作。\n' +
        '1、本人性格开朗，乐观向上，有较好的团队协作能力。 2、工作态度端正、认真负责、做事细心并有耐心。适应能力强。\n' +
        ' 3、平时关注“稀土掘金”、“简书”之类的相关文章对自己进行技术进行补充不提升。'
    )
    const [tableData, setTableData] = useState([])
    const [listQuery, setListQuery] = useState({page: 1, limit: 8})
    const [LoadingState, setLoadingState] = useState(false)
    const carousel = useRef()
    const imgUrl = require('../../assets/img/2024.jpg')
    let timeK = null
    // 请求博客列表
    const getBlogTextList = () => {
        setLoadingState(true)
        getBlogTextListApi({listQuery}).then(res => {
            setTableData([...tableData, ...res.data.rows])
            setLoadingState(false)
        }).catch((e) => {
            console.log(e)
        })
    }

    // 查看更多
    const returnLoading = () => {
        if (LoadingState) {
            return (
                <div>
                    <Spin/>
                </div>
            )
        } else {
            return (
                <div>
                    <Button type="link" icon={<DownloadOutlined/>} onClick={checkMore}>
                        查看更多
                    </Button>
                </div>
            )
        }
    }

    // 查看更多方法
    const checkMore = () => {
        setListQuery({page: listQuery.page + 1, limit: listQuery.limit})
    }

    //页面初始化
    useEffect(() => {
        getBlogTextList()
        timeK = setInterval(() => {
            getBlogTextList()
        }, 300000)

        return () => {
            if (timeK) {
                clearTimeout(timeK);
            }
        }
    }, [listQuery])

    return (
        <div className={style.FrontPage}>
            <div>
                <div
                    ref={carousel}
                    style={{
                        backgroundImage: `url("${imgUrl}")`,
                    }}
                    className={style.carousel}>
                </div>
                <Divider plain>我的简介</Divider>
                <div className={style.introduction}>
                    <div>
                        <p>{introduction}</p>
                    </div>
                </div>
                <div className={style.aboutMe_content}>
                    <div className={style.aboutMe_content_left}>
                        <div>
                            <div><HddOutlined/><span className={style.spanCss}>本项目介绍</span></div>
                            <p className={style.textCss}>
                                1.前端技术栈：react全家桶+antd+ Echarts+wangeditor富文本编辑工具。
                                <br/>
                                2.后端技术栈：nodejs+koa2+mysql
                                <br/>
                                3.服务器环境：腾讯云服务+Linux系统+nginx+node+pm2+Mysql
                            </p>
                        </div>
                        <Divider/>
                        <div>
                            <div>
                                <DeploymentUnitOutlined/><span className={style.spanCss}>专业技能</span>
                            </div>
                            <p className={style.textCss}>
                                1. 熟练使用HTML5、CSS3、JS/TS开发界面交互。
                                <br/>
                                2. 熟练使用前端框架：Vue2/vue3全家桶，react全家桶，能从0到1构建前端项目。
                                <br/>
                                3. 熟练使用CSS预编译：Sass/Scss、Less
                                <br/>
                                4. 熟悉Uni-App跨端开发和微信小程序开发
                                <br/>
                                5. 熟悉webpack配置。
                                <br/>
                                6. 熟练使用响应式布局，实现不同尺寸终端版面适配：@media、flex、rem、vw/vh、rpx
                                <br/>
                                7. 熟练使用主流 UI 组件库：Element UI/Element Plus、Vant、Antd 、Uview、
                                <br/>
                                8. 熟练使用Ajax、Axios异步请求技术，前后端分离式项目开发，对提高用户体验有理解积累
                                <br/>
                                9. 熟练使用Node.js框架（Koa/Express），熟练编写常见SQL语句，能从0搭建node后端，实现基本的增删改查功能。
                                <br/>
                                10. 熟悉NPM包管理工具、熟练使用 git 版本控制工具，具有协同开发的经验。
                                <br/>
                                11. 熟练使用 Nginx 服务器安装部署及常用操作：反向代理、负载均衡。
                                <br/>
                            </p>
                        </div>
                        <Divider/>
                        <div>
                            <div>
                                <LaptopOutlined/><span className={style.spanCss}>工作经历</span>
                            </div>
                            <p className={style.textCss}>xxxx科技股份有限公司（实习）</p>
                            <p className={style.textCss}>xxxx科技股份有限公司</p>
                        </div>
                        <Divider/>
                    </div>
                    {/*右边*/}
                    <div className={style.aboutMe_content_Right}>
                        <Card style={{width: '100%', height: '150px'}}>
                            <div className={style.CardDiv}>
                                <div className={style.aboutMe_content_Right_left}>
                                    <img src={require('../../assets/img/vue.png')} alt="Vue"/>
                                </div>
                                <div className={style.aboutMe_content_Right_right}>
                                    <div className={style.aboutMe_content_Right_right_title}>Vue</div>
                                    <p className={style.aboutMe_content_Right_right_text}>
                                        2021-2023年主要用Vue2做项目，22年学会Vue3+Ts，熟练Vue全家桶及插件。
                                        主要用到的技术栈是Vue+Vux+Vue-Router+Element等UI框架，目前线上有Vue项目3个。
                                    </p>
                                </div>
                            </div>
                        </Card>
                        <Card style={{width: '100%', height: '150px'}}>
                            <div className={style.CardDiv}>
                                <div className={style.aboutMe_content_Right_left}>
                                    <img src={require('../../assets/img/react.png')} alt="React"/>
                                </div>
                                <div className={style.aboutMe_content_Right_right}>
                                    <div className={style.aboutMe_content_Right_right_title}>React</div>
                                    <p className={style.aboutMe_content_Right_right_text}>
                                        2023-8因为家庭原因不得不从上一家公司离职，期间自学了React并用React编写了该博客的前端，
                                        主要用到的技术是React+ReactRouter+Redux+React-Redux+Antd。
                                    </p>
                                </div>
                            </div>
                        </Card>
                        <Card style={{width: '100%', height: '150px'}}>
                            <div className={style.CardDiv}>
                                <div className={style.aboutMe_content_Right_left}>
                                    <img src={require('../../assets/img/node.png')} alt="Node"/>
                                </div>
                                <div className={style.aboutMe_content_Right_right}>
                                    <div className={style.aboutMe_content_Right_right_title}>Node</div>
                                    <p className={style.aboutMe_content_Right_right_text}>
                                        node一直都是前端很重要的部分，我在2022年自学了node，并在2023年8月学会了Koa2和Mysql搭建了该博客的后台
                                        主要用到的技术是：node+koa2+mysql+jwt
                                    </p>
                                </div>
                            </div>
                        </Card>
                        <Card style={{width: '100%', height: '150px'}}>
                            <div className={style.CardDiv}>
                                <div className={style.aboutMe_content_Right_left}>
                                    <img src={require('../../assets/img/Nginx.png')} alt="Nginx"/>
                                </div>
                                <div className={style.aboutMe_content_Right_right}>
                                    <div className={style.aboutMe_content_Right_right_title}>Nginx</div>
                                    <p className={style.aboutMe_content_Right_right_text}>
                                        为了搭建该博客，我还自学了Linux系统和Nginx。在腾讯购买了服务器和域名并用FinalShell软件对该网站服务器进行搭建。
                                    </p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default FrontPage;
